<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/1/12
  Time: 15:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>菜单管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<style>

    #test1{
        width: 300px;
        height: 800px;
        float: left;
    }
    #test2{
        width: 1000px;
        float: left;
    }
</style>
<body>
<div style="display: none;" id="menuToolBar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
</div>
<div  id="menuBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">父级菜单：</label>
            <div class="layui-input-block">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="pid" lay-search="" id="branchTid">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="title"  placeholder="请输入菜单名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单地址:</label>
            <div class="layui-input-block">
                <input type="text" name="href" placeholder="请输入菜单地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单图标:</label>
                <div class="layui-input-inline">
                    <input type="text" name="icon"   placeholder="请输入菜单图标" lay-verify="required" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">TARGET:</label>
                <div class="layui-input-inline">
                    <input type="text" name="target"  placeholder="请输入TRAGET"  autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">是否展开:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="spread" value="1" title="展开">
                    <input type="radio" name="spread" value="0" title="不展开"  checked="checked">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否可用:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="available" value="1" checked="checked" title="可用">
                    <input type="radio" name="available" value="0" title="不可">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
            </div>
        </div>
    </form>

</div>
<%--</div>--%>
<div id="test1" class="demo-tree-more"></div>
<div id="test2" >
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="title" id="title" placeholder="请输入菜单名"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
                </div>
            </div>
        </div>.
    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table></div>


<div id="treeDemo" style="display: none">
    <div id="test1"></div>
    <%--提交修改权限的按钮--%>




    <button class="layui-btn layui-btn-sm" id="subPer">提交权限修改</button>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addRole">新增角色</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新表格</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    var tableIns;
    layui.use(['table','jquery','layer','form','tree'], function(){
        var table = layui.table;
        var $  = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var tree = layui.tree;


        //添加表单的搜索监听事件
        form.on('submit(search)',function(data){
            //表格数据重新渲染。
            table.reload('test',{
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: { //按照什么进行查找
                    "title":data.field.title,
                }
            })
        });

        window.onload=function (){ //页码加载完毕后执行的函数$(function(){})
            getAllPid();
        }
        function getAllPid(){
            $.ajax({
                url:"${pageContext.request.contextPath}/menu/findAlling",
                typeP:"post",
                async:false,//ajax异步交互，async：false是同步提交
                success:function (result) {
                    var type=result.data;
                    var str="<option value=''>选择父级菜单</option>";
                    for (var i = 0; i < type.length; i++) {
                        str+="<option value='"+type[i].id+"'>"+type[i].title+"</option>"
                    }
                    $("#branchTid").html(str);
                    form.render('select'); //让form表单的select标签渲染
                },
                dataType:'json'
            });
        }
        form.on("submit(doSubmit)",function(obj){
            //序列化表单数据
            var params=$("#dataFrm").serialize();
            $.post(url,params,function(obj){
                layer.msg(obj.msg);
                //关闭弹出层
                layer.close(mainIndex)
                //刷新数据 表格
                tableIns.reload();
                //刷新左边的树
                $("#test1").load(location.href + "#divHtml8");
                //刷新添加和修改的下拉树

            })
        });

        //角色名表单验证
        $("#rolename").blur(function () {
            var rolename = $("#rolename").val();
            $.ajax({
                url:'${pageContext.request.contextPath}/role/getOneRole',
                type:"POST",
                data:{"rolename":rolename},
                dataType:"json",
                success:function (result) {
                    if (result.code==1){//名字不重复
                        $("#btnSub").attr("disabled",false);
                    }else{//名字重复
                        $("#btnSub").attr("disabled",true);
                        layer.msg(result.msg);
                    }
                }
            })
        })

        $.ajax({
            type:'get',
            url:'${pageContext.request.contextPath}/menu/treeMenu',
            success:function (treeData) {
                //权限查询成功后，填充权限树
                tree.render({
                    elem: '#test1'
                    ,data: treeData.data
                    ,id:'demoId'
                    // ,isJump: true //是否允许点击节点时弹出新窗口跳转
                    ,showLine: false
                });
            }
        })

        //展示角色信息的方法
        /*function showtable(){*/
        table.render({
            id:'test'
            ,elem: '#test'
            ,url:'${pageContext.request.contextPath}/menu/findAll'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
                ,{field:'pid', title:'父节点id'}
                ,{field:'title', title:'菜单名称'}
                ,{field:'href', title:'菜单地址'}
                ,{field:'spread', title:'是否展开'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
            , page: true
            , limit: 5 //默认每页显示5条
            , limits:[2,5,10,15]
        });
        /*}*/



        //新增和修改角色的表单提交事件
        form.on('submit(editRole)', function (data){
            var roleData = form.val("editForm");
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/role/addOrUpdate",
                dataType: 'json',
                async:false,
                data:roleData,
                success: function (result) {
                    //alert(result!=null);
                    layer.closeAll();//关闭弹框
                    if (result.code == 200 ){
                        layer.msg(result.msg);
                    }else{
                        layer.msg(result.msg);
                    }
                    table.reload('tb');
                }
            });
        });



        //头部工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'addRole':
                    //打开弹出框时先清空
                    openAddMenu();
                    break;
                case 'refresh':
                    table.reload('test');//刷新表格
                    location.reload();
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
        var url;
        var mainIndex;
        function openAddMenu(){
            mainIndex=layer.open({
                type:1,
                title:'添加菜单',
                content:$("#saveOrUpdateDiv"),
                area:['800px','450px'],
                success:function(index){
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    $("#menuSelectDiv").removeClass("layui-show");
                    url="${alfred}/menu/addMenu";
                }
            });
        }


        //监听行工具事件
        var rowData;
        table.on('tool(test)', function(obj){
            var data = obj.data;
            rowData = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除吗', function(index){

                    <%--$.ajax({--%>
                    <%--    type:'post',--%>
                    <%--    url:'${pageContext.request.contextPath}/role/delById',--%>
                    <%--    data:{'roleid':data.roleid},--%>
                    <%--    dataType: 'json',--%>
                    <%--    success:function (result){--%>
                    <%--        layer.closeAll();--%>
                    <%--        if (result.code == 1) {--%>
                    <%--            layer.msg(result.msg)--%>
                    <%--        }else {--%>
                    <%--            layer.msg(result.msg)--%>
                    <%--        }--%>
                    <%--        table.reload('tb');--%>
                    <%--    }--%>
                    <%--})--%>
                    $.post("${alfred}/menu/checkMenuHasChildren?id="+data.id,function(obj){
                        if(obj.code=0){
                            layer.msg("当前菜单有子节点，请先删除完子节点！");
                        }else{
                            layer.confirm('确定删除【'+data.title+'】这个菜单吗？', function(index){
                                //向服务端发送删除指令
                                $.post("${alfred}/menu/deleteMenu",{id:data.id},function(res){
                                    layer.msg(res.msg);
                                    //刷新数据 表格
                                    tableIns.reload();
                                    table.reload('test');//刷新表格
                                    location.reload();
                                    //刷新添加和修改的下拉树
                                    parent.location.reload();
                                })
                            });
                        }
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit') {
                //打开弹出框时先清空
                // $("#editForm")[0].reset();
                // layer.open({
                //     type: 1,
                //     anim: 3,
                //     title: ['修改角色', 'font-size:20px'],
                //     content: $("#editForm"),
                //     offset: '50px',
                //     area: '400px',
                //     success:function (){
                //         form.val("editForm",data);//点击编辑时，填充数据
                //     }
                // })
                openUpdateMenu(data);
            }
        });

        //打开修改页面
        function openUpdateMenu(data){
            mainIndex=layer.open({
                type:1,
                title:'修改用户',
                content:$("#saveOrUpdateDiv"),
                area:['800px','450px'],
                success:function(index){
                    form.val("dataFrm",data);
                    $("#menuSelectDiv").removeClass("layui-show");
                    url="${alfred}/menu/updateMenu";
                    //反选下拉树

                }
            });
        }

        //点击提交修改权限按钮 做修改权限操作
        $("#subPer").click(function () {
            //取出勾选的节点的id数据，父子节点都要
            var checkData = tree.getChecked("demoId");
            var midArr = [];
            $.each(checkData,function (i,obj1) {
                //将勾选的父菜单的id放入数组中
                midArr.push(obj1.id);
                $.each(obj1.children,function (i,obj2) {
                    //将所有勾选的子菜单的id放入数组中
                    midArr.push(obj2.id);
                })
            })

            $.ajax({
                type:'post',
                url:"${pageContext.request.contextPath}/menu/updatePermission",
                data:{"roleid":rowData.roleid,"midArr":midArr+""},
                dataType:'json',
                success:function (result) {
                    layer.closeAll();
                    if(result.code==1){
                        layer.msg(result.msg,{icon:1});
                    }else{
                        layer.msg(result.msg,{icon:5});
                    }
                }
            })
        })
    });
</script>
</body>
</html>
